<template>
  <div class="mobile-options">
    <div style="display: flex; flex-wrap: nowrap; width: 100vw; overflow: scroll; scrollbar-width: none">
      <button
        v-for="(wallet, index) in wallets"
        :key="index"
        style="
          margin: 0 20px;
          text-align: center;
          width: 60px;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: transparent;
          border: none;
        "
        @click="checkedWallet(wallet)"
      >
        <img
          style="width: 60px; height: 60px; border-radius: 8px; margin-top: 10px; margin-bottom: 8px; max-width: none"
          :src="wallet.icon ?? wallet.iconUrl"
        />
        <div>
          <div
            style="font-size: 13px; font-weight: bold; white-space: nowrap; text-align: center; letter-spacing: -0.08em;color: #f2f2f2"
            >{{ wallet.name }}</div
          >
          <div style="font-size: 12px; line-height: 18px; color: #d9fc01" :style="{ opacity: wallet.recent ? 1 : 0 }">
            Recent
          </div>
        </div>
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useWalletConnectors, type WalletConnector } from '../../wallets/useWalletConnectors'

  withDefaults(defineProps<{ wallet: WalletConnector | undefined }>(), {})
  const emits = defineEmits(['selectWallet'])

  const wallets = useWalletConnectors().filter((wallet) => wallet.isWalletKitConnector && wallet.ready)

  const checkedWallet = (wallet: WalletConnector) => {
    emits('selectWallet', wallet)
  }
</script>

<style lang="scss" scoped>
  button {
    transition: all 0.3s ease;
    &:active {
      transform: scale(0.95);
    }
  }
</style>
